import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
const pathSrc = path.resolve(__dirname, 'src');
export default ({ command, mode }) => {
  return defineConfig({
    base: './',
    resolve: {
      alias: {
        '~/': `${pathSrc}/`,
        '@/': `${pathSrc}/`, // 引入的时候 简便方法  @/ => /src/
        '@/u': `${pathSrc}/utils/*`, // 引入的时候 简便方法  @/u/ => /src/utils/
        '@/hooks': `${pathSrc}/hooks/*`,
      },
    },
    define: {
 
    },
    server: {
      open: true,
      host: '0.0.0.0',
      port: 9999, //更改启动端口
      //hmr: false,
      // 代理
      proxy: {
        '/bpi': {
          target: 'http://192.168.40.88:984/', //代理的地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/bpi/, '/'),
        },
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          @use "~/styles/variables.module.scss" as *;
          @use "~/styles/mixin.module.scss" as *; 
          `, 
        },
      },
    },

    plugins: [
      vue(),
      VueSetupExtend(),
      Components({
        dirs: ['src/components'], // , 'src/views/...'
        // 按需引入组件，不需要在import 了！
        extensions: ['vue', 'md'],
        // 允许自动引入的组件尾缀！
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [
          ElementPlusResolver({
            importStyle: 'sass',
          }),
        ],
        dts: 'src/components.d.ts', // 自动引入文件后，生成的文件列表，js版注释掉
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')], // 指定需要缓存的图标文件夹
        symbolId: '[name]', // 指定symbolId格式
      }),
    ],
  });
};
